﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题  文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="css/mobiscrollcss/mobiscroll.custom-2.6.2.min.css">
<link rel="stylesheet" type="text/css" href="css/clicentcss.css">

<script src="js/mobiscroll.custom-2.6.2.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/JKLogin.js"></script>
<script type="text/javascript" src="js/JKCheckForm.js"></script>
<script type="text/javascript" src="js/JKFunc.js"></script>
<script type="text/javascript" src="js/JKRegister.js"></script>

<script type="text/javascript" src="js/lib/jquery.mobile-1.4.2.min.js"></script>
</head>

<body>
<div data-role="page" id="page_4_1" data-theme="jk">
  <div data-role="header" >
    <div class="ui-grid-a" style="vertical-align:middle">
      <div class="ui-block-a" style="width:75%">
        <input type="search" name="search41" id="search41" placeholder="亲，搜索您爱吃的水果种类或名称"/>
      </div>
      <div class="ui-block-b" style="width:30%;" ><a class="ui-btn ui-shadow ui-corner-all ui-btn-right " onClick="" data-transition="slide" style="margin-top:5.5px;background-color:#94252a">购物车</a> </div>
    </div>
  </div>
  <div data-role="content">
    <ul data-role="listview" >
      <li data-role="list-divider" >
        <p align="center" style="font-size:16px">附近外送的水果摊</p>
      </li>
      <li> 
      <a href="#page_7_1" data-transition="slide">
        <div class="ui-grid-b" style="margin-left:-10px">
          <div class="ui-block-a" style="margin-top:15px">
           <p><img id="" src="111.JPG" style="max-width:90px"></p>
          </div>
          <div class="ui-block-b" style="width:auto" >
            <p style="font-size:16px">红蛇果</p>
            <p>爱心水果摊</p>
            <p>距离100米</p>
            <p>最快30分钟送达</p>
            <p>满40元免5元送货费</p>
          </div>
          <div class="ui-block-c" style="margin-top:10px;margin-left:-30px" align="right">
            <p ><span>3元/个</span><span> 20元/斤</span></p>
            <p style="font-size:12px"><span>挑:4.5</span><span> 速:4.5</span></p>
            <p>月销量200斤</p>
          </div>
        </div></a></li>
    </ul>
    


  </div>
  <div  data-role="popup" id="page_4_2" data-theme="jk">
  <img src="../client140623/111.JPG" style="width:100%">
</div>
</div>

<div data-role="page" id="page_7_1" data-theme="jk">
  <div data-role="header" >
  <a  class="ui-btn ui-corner-all" data-rel="back" data-icon="back"  style="background-color:#94252a">返回</a>
  <h1>水果详情</h1>
 <a  class="ui-btn ui-corner-all" onClick="" style="background-color:#94252a" >购物车</a>
  </div>
  <div data-role="content" style="color:#FFFFFF">
  <div class="ui-grid-b">
  <div class="ui-block-a">
  <a href="#page_7_2" data-rel="popup" data-position-to="window" data-transition="pop"><img src="../client140623/111.JPG" style="width:100%"></a>
  <a href="#page_7_2"data-rel="popup" data-position-to="window" data-transition="pop"><img src="../client140623/111.JPG" style="width:100%"></a>
  </div>
  <div class="ui-block-b">
  <a href="#page_7_2"data-rel="popup" data-position-to="window" data-transition="pop"><img src="../client140623/111.JPG" style="width:100%"></a>
 <a href="#page_7_2"data-rel="popup" data-position-to="window" data-transition="pop"><img src="../client140623/111.JPG" style="width:100%"></a>
  </div>
  <div class="ui-block-c">
  <a href="#page_7_2"data-rel="popup" data-position-to="window" data-transition="pop"><img src="../client140623/111.JPG" style="width:100%"></a>
  <a href="#page_7_2"data-rel="popup" data-position-to="window" data-transition="pop"><img src="../client140623/111.JPG" style="width:100%"></a>
  </div>
  </div>
  <div>
  <div class="ui-grid-b" align="center">
  <div class="ui-block-a">
  <p>红蛇果</p>
  </div>
  <div class="ui-block-b">
  <p>平均5元/个</p>
  </div>
  <div class="ui-block-c">
  <p>20元/斤</p>
  </div>
  <span>老板吆喝：</span><span>美国进口红蛇果，口感爽脆</span>
  </div>
  
  </div>
   <div class="ui-grid-a" >
            <div class="ui-block-a">
            	<a class="ui-btn ui-corner-all"   data-transition="slide" style="background-color:#94252a">前往店铺</a>
            </div>
            <div class="ui-block-b">
            	<a class="ui-btn ui-corner-all" href="#page_8_2" data-rel="popup" data-position-to="window" data-transition="pop" style="background-color:#94252a">加入购物车</a>
            
        </div>
    </div>
  <div style="margin-top:-20px">
  <p>用户评价：</p>
  <ul data-role="listview" style="overflow:scroll;height:150px;"  >
  
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  <li>看上去很好吃</li>
  </ul>
  </div>
  
 
  
  </div>
  
   <div  data-role="popup" id="page_8_2" style="padding:10px; height:250px" data-dismissible="false" data-theme="jk">
   <div>
  <span style="font-size:20px;">红蛇果</span>
        <div>
          <div class="ui-grid-a" >
            
            <div class="ui-block-a" style="width:70px;">
              <input type="text" id="how82" onChange="calculate()">
            </div>
            <div class="ui-block-b">
              <select name="liang" id="liang">
                <option value="ge">个</option>
                <option value="jin">斤</option>
                <option value="yuan">元</option>
              </select>
            </div>
          </div>
          <span id="calculate82" style="display:none;font-size:14px">4个，10斤，40元</span>
  
            <label for="ask82">要求：</label>
            <input type="text" id="ask82" name="ask82">

          <div class="ui-grid-a" >
            <div class="ui-block-a">
            	<a class="ui-btn ui-corner-all" onClick="buy82()" style="background-color:#94252a">确定</a>
            </div>
            <div class="ui-block-b">
            	<a  class="ui-btn ui-corner-all" data-rel="back" data-icon="back" style="background-color:#94252a">返回</a>
            
        </div>
    </div>
          </div>
          
</div>
  
  
  <div  data-role="popup" id="page_7_2" >
  <img src="../client140623/111.JPG" style="width:100%">
</div>
</div>



<script type="text/javascript">
function buy82(){
	alert("操作成功");
	$.mobile.changePage("#page_4_1",{transition:"slide"});
	
	}

function calculate(){
	$("#calculate82").css("display","block");
	}


function buy(){
	alert("加入购物车");
	}
</script>
<div data-role="panel" id="leftpanel" data-position="left " data-display="reveal" data-theme="jk" style="border:none;">
  <ul >
    <li><a href="#page_3_1" data-transition="slide" class="ui-btn" onClick="javascript:samePageID('#page_3_1');"  >搜索附近的水果</a></li>
    <li><a href="#page_2_1" data-transition="slide" class="ui-btn" onClick="javascript:samePageID('#page_2_1');">到货地址附近的水果</a></li>
    <li><a href="#page_4_1_1" data-transition="slide" class="ui-btn" onClick="javascript:samePageID('#page_4_1_1');" >我的购物车</a></li>
    <li><a href="#page_5_1_1" data-transition="slide" class="ui-btn" onClick="javascript:samePageID('#page_5_1_1');" >订单历史记录</a></li>
    <li><a href="#page_5_2_1" data-transition="slide" class="ui-btn" onClick="javascript:samePageID('#page_5_2_1');" >我的个人信息</a></li>
  </ul>
</div>
<script>
	var currentPageID = "#page_3_1";
	$(function() {
		$(document).on("swiperight", function(event){
			$( "#leftpanel" ).panel( "open" );
		});
		$(document).on("swipeleft", function(event){
			$( "#leftpanel" ).panel( "close" );
		});
	});
	function samePageID(newPageID){
		if(currentPageID == newPageID) {
			$(":jqmData(role='panel')").panel('close');
		}else{
			currentPageID = newPageID;
		}
	};
</script> 
<script id="panel-init">
		$(function() {
			$( "body>[data-role='panel']" ).panel();
		});
	</script>
</body>
</html>
